<template>
  <div class="app-container">
    <!-- 引入封装的侧边栏组件 -->
    <SideBarView
      :is-collapsed="isCollapsed"
      :routes="filteredRoutes"
      @toggle="handleSidebarToggle"
      logo-text="后台管理"
      logo-text-short="MA"
    />

    <!-- 主内容区 -->
    <main class="main-content" :class="{ 'content-expanded': isCollapsed }">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import SideBarView from '../layout/SideBarView.vue'
import { useUserStore } from '@/stores/user'

// 获取用户存储实例
const userStore = useUserStore()

// 定义组件属性，接收路由传递的routes数据
const props = defineProps({
  routes: {
    type: Array,
    default: () => [
      { path: '/usermanage', name: '用户管理', icon: 'fa fa-user' },
      // { path: '/settings', name: 'Settings', icon: 'fa fa-cog' },
      // { path: '/messages', name: 'Messages', icon: 'fa fa-envelope' },
      // { path: '/analytics', name: 'Analytics', icon: 'fa fa-bar-chart' },
    ],
  },
})

// 侧边栏折叠状态
const isCollapsed = ref(false)

// 处理侧边栏切换
const handleSidebarToggle = (collapsedState) => {
  isCollapsed.value = collapsedState
}

// 根据用户角色过滤路由
const filteredRoutes = computed(() => {
  // 如果用户未登录，返回空数组
  if (!userStore.isLoggedIn) {
    return []
  }

  // 获取用户角色
  const userRole = userStore.getUserRole

  // 根据用户角色过滤路由
  return props.routes.filter((route) => {
    // 如果路由没有配置角色，则默认允许访问
    if (!route.meta || !route.meta.roles) {
      return true
    }

    // 检查用户角色是否在路由允许的角色列表中
    return route.meta.roles.includes(userRole)
  })
})
</script>

<style lang="scss" scoped>
$sidebar-width: 250px;

.app-container {
  display: flex;
  min-height: 100vh;
  background-color: #f5f7fa;
}

// 主内容区样式
.main-content {
  // margin-left: $sidebar-width;
  flex: 1;
  // padding: 2rem;
  transition: margin-left 0.3s ease;
  position: relative;
  z-index: 1;

  // &.content-expanded {
  //   margin-left: $sidebar-collapsed-width;
  // }
}

// 响应式调整
@media (max-width: 768px) {
  .main-content {
    margin-left: 0;

    &.content-expanded {
      margin-left: 0;
    }
  }
}
</style>
